<template>
  <el-card style="width: 100%; height: 100vh" class="hidden-scrollbar">
    <template #header>
      <div class="card-header">
        <span style="color: #c4cbcf">商城订单 - </span>
        <span> 预约订单列表</span>
      </div>
    </template>
    <div class="card-content">
      <el-card style="width: 100%; height: auto" class="hidden-scrollbar">
        <div style="margin-top: 10px">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <!-- 左侧：时间选择 -->
            <el-form :model="searchForm" class="search-form" style="flex: 1">
              <span>预约时间</span>
              <el-date-picker
                style="width: 220px"
                v-model="searchForm.dateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              />
            </el-form>

            <!-- 中间：导出按钮 -->
            <el-button style="margin: 0 20px">导出记录</el-button>

            <!-- 右侧：搜索条件 -->
            <el-form
              class="search-form"
              style="justify-content: flex-end; flex: 1"
            >
              <el-select
                v-model="searchForm.orderType"
                placeholder="全部订单类型"
                style="width: 120px"
                clearable
              >
                <el-option label="全部" value="" />
                <el-option label="普通" value="2" />
                <el-option label="全名营销" value="3" />
                <el-option label="分分销" value="4" />
              </el-select>
              <el-select
                v-model="searchForm.orderStatus"
                placeholder="全部订单状态"
                style="width: 130px"
                clearable
              >
                <el-option label="全部" value="" />
                <el-option label="未支付" value="2" />
                <el-option label="已完成" value="3" />
                <el-option label="已关闭" value="4" />
                <el-option label="待确认" value="5" />
              </el-select>
              <el-input
                v-model="searchForm.keyword"
                style="width: 240px"
                placeholder="订单编号/顾客姓名/商品名称"
                clearable
              />
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form>
          </div>
        </div>
      </el-card>

      <el-card
        style="width: 100%; height: 60vh; margin-top: 10px"
        class="hidden-scrollbar"
      >
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="orderId" label="订单编号" width="180" />
          <el-table-column
            prop="reservationName"
            label="预约名称"
            width="150"
          />
          <el-table-column prop="customer" label="顾客" width="120" />
          <el-table-column prop="phone" label="手机号" width="130" />
          <el-table-column
            prop="reservationDate"
            label="预约日期"
            width="120"
          />
          <el-table-column prop="amount" label="订单金额" width="120" />
          <el-table-column prop="status" label="状态" width="100" />
          <el-table-column label="操作" width="80">
            <template #default>
              <el-link type="primary" size="small">详情</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </el-card>
</template>

<script setup>
import { reactive, ref, computed } from "vue";

// 生成预约订单假数据
const generateMockData = () => [
  {
    orderId: "DD20240315001",
    reservationName: "晨曦活力早餐礼盒",
    customer: "张三",
    phone: "13800138000",
    reservationDate: "2025-03-20",
    amount: "￥598.00",
    status: "待确认",
    orderType: "普通",
  },
  ,
  {
    orderId: "DD20240315002",
    reservationName: "静谧时刻按摩油",
    customer: "李四",
    phone: "13912345678",
    reservationDate: "2025-03-22",
    amount: "￥2999.00",
    status: "已完成",
    orderType: "全名营销",
  },
  {
    orderId: "DD20240315003",
    reservationName: "温馨记忆手工巧克力礼盒",
    customer: "王五",
    phone: "13698765432",
    reservationDate: "2025-03-25",
    amount: "￥880.00",
    status: "未支付",
    orderType: "分分销",
  },
  {
    orderId: "DD20240315004",
    reservationName: "都市绿洲室内植物装饰",
    customer: "赵六",
    phone: "13566778899",
    reservationDate: "2025-03-28",
    amount: "￥4500.00",
    status: "已关闭",
    orderType: "普通",
  },
  {
    orderId: "DD20240315005",
    reservationName: "星级享受迷你吧礼包",
    customer: "陈七",
    phone: "18812341234",
    reservationDate: "2024-04-01",
    amount: "￥12500.00",
    status: "已完成",
    orderType: "全名营销",
  },
];

// 响应式数据
const originalData = ref(generateMockData());
const searchForm = reactive({
  dateRange: [],
  orderType: "",
  orderStatus: "",
  keyword: "",
});

// 计算属性处理过滤逻辑
const tableData = computed(() => {
  return originalData.value.filter((item) => {
    // 时间范围过滤
    const timeValid =
      searchForm.dateRange.length !== 2 ||
      (item.reservationDate >= searchForm.dateRange[0] &&
        item.reservationDate <= searchForm.dateRange[1]);

    // 订单类型过滤（值映射）
    const typeMap = {
      2: "普通",
      3: "全名营销",
      4: "分分销",
    };
    const typeValid =
      !searchForm.orderType || item.orderType === typeMap[searchForm.orderType];

    // 订单状态过滤（值映射）
    const statusMap = {
      2: "未支付",
      3: "已完成",
      4: "已关闭",
      5: "待确认",
    };
    const statusValid =
      !searchForm.orderStatus ||
      item.status === statusMap[searchForm.orderStatus];

    // 关键字搜索
    const keyword = searchForm.keyword.toLowerCase();
    const keywordValid =
      !keyword ||
      item.orderId.toLowerCase().includes(keyword) ||
      item.customer.toLowerCase().includes(keyword) ||
      item.reservationName.toLowerCase().includes(keyword);

    return timeValid && typeValid && statusValid && keywordValid;
  });
});

// 搜索操作
const handleSearch = () => {
  // 计算属性会自动更新
};

// 重置操作
const handleReset = () => {
  searchForm.dateRange = [];
  searchForm.orderType = "";
  searchForm.orderStatus = "";
  searchForm.keyword = "";
};
</script>

<style scoped>
.hidden-scrollbar {
  overflow: hidden;
}

.card-content {
  height: calc(100vh - 150px);
  overflow-y: auto;
}

.search-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

.el-table .cell {
  white-space: nowrap;
}
</style>